<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newtree()">新增分类</a>
    </div>
    <ul id="tt" index="1"></ul>

    <div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="appendToCate()" data-options="iconCls:'icon-add'">新增分类</div>
        <div onclick="updateit()" data-options="iconCls:'icon-edit'">修改新闻分类</div>
        <div onclick="removeit()" data-options="iconCls:'icon-remove'">删除分类</div>
    </div>

    <div id="dlg" class="easyui-dialog" title="新增新闻分类" closed="true" data-options="iconCls:'icon-save'" style="width:500px;height:250px;padding:10px">
        <form id="ff" method="post">
            <div style="margin-bottom:20px;display:none">
                <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'id:',required:true">
                <input class="easyui-textbox" name="parentid" style="width:100%" data-options="label:'parentid:',required:true">
            </div>
            <div style="margin-bottom:20px;display:block" class="textbox1">
                <input class="easyui-textbox" name="newstitle" id='newslist' style="width:100%" data-options="label:'分类标题:',required:true">

            </div>
            <div style="margin-bottom:20px;" class="textbox2">
                <input class="easyui-textbox" name="newsTitle1" style="width:100%" data-options="label:'修改标题:',required:true">

            </div>
            <div id='tips' style="color: red"></div>
            <a href="#" id="dataSumbit" class="easyui-linkbutton" data-options="iconCls:'icon-add'">提交</a>
        </form>

    </div>
</body>

</html>
<script> 
    var data = {};
    $('#tt').tree({
        url: 'http://localhost:3000/cate/tree/1',
        method: 'get',
        animate: true,
        onContextMenu: function (e, node) {
            e.preventDefault();
            data = getData(node);
            $(this).tree('select', node.target);
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        },
        onClick: function (node) {
            data = getData(node);
        },
    });

    function appendToCate() {
        var t = $('#tt');
        var node = t.tree('getSelected');
        $('#dlg').dialog('open');
        $('#tips').text('');
        $('.textbox1').css({ display: 'block' });
        $('.textbox2').css({ display: 'none' });
        $('#dataSumbit').off('click').click(function () {
            var newsTitle = $('#ff').serializeJSON().newstitle;
            if (newsTitle.trim() != '') {
                $('#tips').text('');
                data.text = newsTitle;
                $.ajax({
                    url: `http://localhost:3000/cate/data`,
                    type: 'post',
                    data: data
                }).then(res => {
                    t.tree('append', {
                        parent: (node ? node.target : null),
                        data: [{
                            text: newsTitle
                        }]
                    });
                    $('#ff').form('clear');
                    $('#tt').tree('reload');
                    $('#dlg').dialog('close');

                });
            } else {
                $('#tips').text('分类名不能为空')
            }
        });

    }

    function removeit() {
        $.messager.defaults = { ok: "确定", cancel: "取消", width: '300px' };
        $.messager.confirm('记录删除', '确定要删除吗?', function (r) {
            if (r) {
                var t = $('#tt');
                var node = t.tree('getSelected');
                let data = getData(node);
                data._id = data.parentId;
                delete data.parentId;
                $.ajax({
                    url: `http://localhost:3000/cate/data/${data._id}`,
                    type: 'delete'
                }).then(res => {
                    $('#tt').tree('remove', node.target);
                    $.messager.show({
                        title: '信息提示',
                        msg: '删除成功',
                        showType: 'show'
                    });
                });
            }

        });
    }

    function updateit() {
        var t = $('#tt');
        var node = t.tree('getSelected');
        $('#dlg').dialog('open');
        $('#tips').text('');
        $('.textbox1').css({ display: 'none' });
        $('.textbox2').css({ display: 'block' });

        $('#dataSumbit').off('click').click(function () {
            var data = {};
            data._id = node._id;
            var newsTitle1 = $('#ff').serializeJSON().newsTitle1;
            data.text = newsTitle1;
            if (newsTitle1 && newsTitle1.trim().length > 0) {
                $('#tips').text('');
                data.text = newsTitle1;
                $.ajax({
                    url: `http://localhost:3000/cate/data/${node._id}`,
                    type: 'put',
                    data: data
                }).then(res => {
                    $("#dlg").dialog('close');
                    $("#tt").tree("reload");
                })
            } else {
                $('#tips').text('分类名不能为空');

            }
        })
    }

    function getData(node) {
        return {
            parentId: node._id,
            type: node.type
        }
    }
    function newtree() {
        data.type = 1;
        delete data.parentId;
        appendToCate();
    }
</script>
